<template>
	<div v-show="diyShow">
		<div class="title">个人导航设置</div>
		<el-form class="mt-4 w-[420px]" label-width="90px">
			<el-card class="content mb-4" shadow="never">
				<div class="sub-title">样式设置</div>
				<el-form-item label="排版样式：">
					<el-radio-group v-model="formData.style.service_style" class="ml-4">
						<el-radio :label="2" size="large">竖排</el-radio>
						<el-radio :label="1" size="large">横排</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="每行数量：" v-show="formData.style.service_style != 2">
					<el-radio-group v-model="formData.style.service_count" class="ml-4">
						<el-radio :label="3" size="large">3个</el-radio>
						<el-radio :label="4" size="large">4个</el-radio>
						<el-radio :label="5" size="large">5个</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-card>
			<el-card class="content mb-4" shadow="never">
				<div class="sub-title">导航设置</div>
				<div class="mb-[18px]">
					<draggable class="draggable" v-model="formData.list" animation="300" draggable=".draggable"
						:move="onMove">
						<template v-slot:item="{ element, index }">
							<div class="sub-item max-w-[400px] cursor-pointer" :class="{ draggable: index != 0 }">
								<div class="close-btn" @click="handleDelete(index)">
									<SvgIcon name="ele-Close" size="12" />
								</div>
								<div class="bg-fill-light w-full p-4 mt-4">
									<el-form-item label="导航图标：">
										<imageUpload v-model="element.icon" :limit="1" promptText="建议尺寸：100*100" />
									</el-form-item>
									<el-form-item label="导航名称：">
										<el-input v-model="element.name" placeholder="请输入导航名称" />
									</el-form-item>
									<el-form-item label="链接地址：">
										<linkSelect v-model="element.link" :type="1" />
									</el-form-item>
								</div>
							</div>
						</template>
					</draggable>
				</div>
				<div>
					<el-form-item label-width="0">
						<el-button class="w-full" type="primary" @click="handleAdd"> 添加导航 </el-button>
					</el-form-item>
				</div>
			</el-card>
		</el-form>
	</div>
</template>

<script lang="ts" setup name="diyCenterNav">
import { ref, reactive, watch } from 'vue';
import { diyGetPersonCenter } from '/@/api/diy';
import Draggable from 'vuedraggable';

const diyShow = ref(true);

const formData = reactive({
	style: {
		service_style: 1,
		service_count: 3,
	},
	list: [
		{
			name: '',
			icon: '',
			link: '',
		},
	],
});

const emit = defineEmits(['getData']);

watch(
	formData,
	() => {
		emit('getData', formData);
	},
	{ immediate: true }
);

const handleAdd = () => {
	formData.list.push({
		name: '',
		icon: '',
		link: '',
	});
};

const handleDelete = (index: number) => {
	formData.list.splice(index, 1);
};

const onMove = (e: any) => {
	if (e.relatedContext.index == 0) {
		return false;
	}
	return true;
};

const getData = async () => {
	const data = await diyGetPersonCenter({ type: 1 });
	const navData = data.data?.nav;
	if (navData) {
		for (const key in formData) {
			if (navData[key] != null && navData[key] != undefined) {
				formData[key] = navData[key];
			}
		}
	}
	emit('getData', formData);
};

const setData = (navData: any) => {
	for (const key in formData) {
		if (navData[key] != null && navData[key] != undefined) {
			formData[key] = navData[key];
		}
	}
	emit('getData', formData);
};

const changeDiv = (show:boolean) => {
	diyShow.value = show;
};

defineExpose({
	getData,
	setData,
	changeDiv
});
</script>
<style lang="scss" scoped></style>
